<template>
  <div class="home-container">
    <div class="home-header">
      <div class="header-item" v-for="(item, key) in titles1" :key="key">
        <img :src="getImageUrl(item.titleIcon)" alt="数据图标">
        <div class="data-content">
          <div class="title">{{ item.title }}</div>
          <div class="data-value">{{ formatData(item.data) }}</div>
        </div>
      </div>
    </div>

    <div class="detection-data">
      <mybr describe="实时查看监测点分布及状态和最新识别信息" title="实时监测概览"></mybr>
      <div class="detection-data-main">
        <scrolling></scrolling>
        <map_drive></map_drive>
      </div>
    </div>

    <div class="detection-data-analysis">
      <mybr describe="系统监测数据统计与分析" title="实时数据分析"></mybr>
      <div class="detection-data-analysis-main">
        <bar_monitor></bar_monitor>
        <pie_monitor></pie_monitor>
        <activityChart></activityChart>
      </div>
    </div>

    <div class="home-video-container">
      <mybr describe="系统在不同场景下捕捉的鸟类活动监测视频" title="监测视频"></mybr>
      <mySwiper></mySwiper>
    </div>

    <div class="system-introduction-container">
      <mybr describe="我们的平台提供专业的珍稀鸟类监测解决方案" title="系统功能"></mybr>
      <myIntroduction></myIntroduction>
    </div>


  </div>
  <!-- 页脚 -->
  <footer class="footer">
    <div class="container">
      <div class="footer-bottom">
        <p>© 2025 鸟类智能监测平台 | 聚萤工作室版权所有</p>
      </div>
    </div>
  </footer>
</template>

<script lang="ts" setup>
import { ref,reactive, onMounted, onUnmounted, computed } from 'vue'

import map_drive from '@/components/homecom/map.vue'
import scrolling from '@/components/homecom/scrolling.vue'
import mybr from '@/components/homecom/mybr.vue'
import bar_monitor from '@/components/homecom/analysis1.vue'
import pie_monitor from '@/components/homecom/analysis2.vue'
import activityChart from '@/components/homecom/analysis3.vue'
import mySwiper from '@/components/homecom/swiper.vue'
import myIntroduction from '@/components/homecom/introduction.vue'

// 导入所有图片
import driveIcon from '@/assets/title1/drive.png'
import viewsIcon from '@/assets/title1/views.png'
import birdtypeIcon from '@/assets/title1/birdtype.png'
import countIcon from '@/assets/title1/count.png'
import accuracyIcon from '@/assets/title1/accuracy.png'


// 图片映射对象
const imageMap:Record<string, string> = {
  'drive.png': driveIcon,
  'views.png': viewsIcon,
  'birdtype.png': birdtypeIcon,
  'count.png': countIcon,
  'accuracy.png': accuracyIcon
}

// 获取图片URL的方法,确保数据不会出错
const getImageUrl = (iconPath: string) => {
  const fileName = iconPath.split('/').pop() || ''
  return imageMap[fileName] || ''
}

// 格式化数据展示，确保数据位字符串的方式输出
const formatData = (value: number | string) => {
  if (typeof value === 'number') {
    return value.toLocaleString()
  }
  return value
}

// 今日检测数据名称
const titles1 = reactive({
  drive: {
    titleIcon: "drive.png",
    title: "设备数量",
    data:5
  },
  views: {
    titleIcon: "views.png",
    title: "识别珍稀鸟类数量",
    data: 123,
  },
  birdtype: {
    titleIcon: "birdtype.png",
    title: "累计识别种类",
    data: 12,
  },
  count: {
    titleIcon: "count.png",
    title: "识别鸟类数量",
    data: 1234,
  },
  accuracy: {
    titleIcon: "accuracy.png",
    title: "识别准确率",
    data: "97.5%"
  }
})

</script>

<style scoped>
.home-container {
  background: linear-gradient(135deg, #e0f7fa, #c8e6c9, #a5d6a7);
  min-height: 100vh;
  width: 100%;
  padding: 40px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.home-header {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 25vh;
  width: 77%;
  margin-top: 5% ;
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  border-radius: 20px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  padding: 20px;
}

.header-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 15%;
  padding: 15px;
  border-radius: 15px;
  background: white;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.header-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  background: linear-gradient(135deg, rgba(67, 97, 238, 0.1), rgba(58, 12, 163, 0.1));
}

.header-item img {
  width: 60px;
  height: 60px;
  margin-bottom: 15px;
  object-fit: contain;
}

.data-content {
  text-align: center;
}

.title {
  font-size: 14px;
  color: #6c757d;
  margin-bottom: 8px;
  font-weight: 500;
}

.data-value {
  font-size: 24px;
  font-weight: 700;
  color: #4361ee;
}

.detection-data {
  width: 77%;
  height:120vh;
  margin-top: 5%;
  padding: 20px;
  background: white;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  border: 1px solid #eaeaea;
}

.detection-data-main{
  height: 90%;
  display: flex;
  justify-content: space-around;
  overflow: hidden;
  margin-top: 3%;
}

.detection-data-analysis{
  width: 77%;
  height:90vh;
  margin-top: 5%;
  padding: 20px;
  background: white;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.detection-data-analysis-main{
  display: flex;
  justify-content: space-around;
}

.home-video-container{
  width: 77%;
  margin-top: 5%;
  padding: 20px;
  background: white;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  border: 1px solid #eaeaea;

}

.system-introduction-container{
  width: 77%;
  margin-top: 5%;
  padding: 20px;
  height: 100vh;
  background: white;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  border: 1px solid #eaeaea;
  position: relative;
}

.footer {
  background-color: #2c3e50;
  color: #ecf0f1;

  width: 100%;

}

.container {
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 15px;
}
.footer-bottom {
  padding: 20px 0;
  border-top: 1px solid #34495e;
  text-align: center;
  font-size: 12px;
  color: #bdc3c7;
}


</style>